<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<th:block th:include="include :: wxheader('申请提货')" />
		<link rel="stylesheet" th:href="@{/css/apply.css}" href="css/apply.css" />
		<link rel="stylesheet" th:href="@{/css/deliver.css}" href="css/deliver.css" />
		<link rel="stylesheet" th:href="@{/lib/jquery-weui/dist/css/jquery-weui.min.css}" type="text/css" href="lib/jquery-weui/dist/css/jquery-weui.min.css">
		<link rel="stylesheet" th:href="@{/lib/jquery-weui/dist/lib/weui.min.css}" type="text/css" href="lib/jquery-weui/dist/lib/weui.min.css">
	</head>
     <style>
		 .all02{
			 width: 98%;
		 }
	 </style>
	<body>

		<div class="leftbox">
			<!--<div class="text-ti">预约自提</div>-->
			<div class="text-ti mmactive">申请送货</div>
		</div>

		<div class="all">
			<div class="all02" style="display: none;">
				<div class="content mui-content">

					<div class="content-center">
						<ul class="mui-table-view mui-table-view-chevron"
							th:if="${shopList != null}"
							th:each="shop : ${shopList}">
							<li class="mui-table-view-cell">
								<a th:href="@{/wx/index/update(shopId=${shop.shopId},giftCardId=${giftCard.giftCardId})}">[[${shop.shopName}]]<img th:src="@{/img/yuyue.png}" class="time"><span class="text-t">预约时间</span></a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right"
								   th:href="@{/wx/index/map(shopId=${shop.shopId})}" href="map.html">
									<span class="mui-icon mui-icon-location"></span>[[${shop.shopAddress}]]</a>
							</li>
							<li class="mui-table-view-cell">
								<a th:href="'tel:'+${shop.shopTel}" class="mui-navigate-right"><span class="mui-icon mui-icon-phone"></span>[[${shop.shopTel}]]</a>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<div class="all01" style="width: 100%">
				<div id="header">
					<div class="all" th:if="${giftCard!=null}">
						<div class="tu01"><img th:src="${giftCard.imgUrl}"
											   src="img/tu01.png"></div>
						<div class="text">
							<p class="b16" th:text="${giftCard.productName}">精美大礼包【演示】</p>
							<p class="gray" th:utext ="${giftCard.productSpecs}">商品内容</p>
						</div>
					</div>
				</div>

				<div id="content">
					<p class="redcenter">完善送货信息</p>
					<form class="mui-input-group" id="dataForm" onsubmit="return form();">
						<input type="hidden" name="giftCardId" th:value="${giftCard.giftCardId}">
						<input type="hidden" name="orderAddress">
						<div class="mui-input-row">
							<label>收货人姓名：</label>
							<input name="consignee" type="text" placeholder="请输入姓名" required="required">
						</div>
						<div class="mui-input-row">
							<label>收货人电话：</label>
							<input name="tel" type="tel" placeholder="请输入收货人电话" pattern="\d{11}" required="required">
						</div>
						<!--<div class="mui-input-row">
							<label>持卡人电话：</label>
							<input type="tel" placeholder="请输入持卡人电话" pattern="\d{11}">
						</div>-->
						<div class="mui-input-row">
							<label>收货地址：</label>
							<input type="text" id='city-picker' name="city" value="北京 北京市 东城区" class="address" />
						</div>
						<div class="mui-input-row">
							<label>详细地址：</label>
							<input type="text" name="street" placeholder="请输入详细地址，如门牌号" required="required" />
						</div>
						<div class="mui-input-row">
							<label>验&ensp;证&ensp;码：</label>
							<input name="validateCode" class="code" type="text" placeholder="获取验证码" required="required" />
							<!--<img src="img/yanzm.jpg" class="yanzm">-->
							<a href="javascript:void(0);" title="点击更换验证码">
								<img th:src="@{/captcha/captchaImage(type=number)}" class="imgcode yanzm"/>
							</a>
						</div>

						<div class="mui-input-row">
							<label>备&emsp;&emsp;注：</label>
							<input name="descn" type="text" placeholder="请输入备注信息">
						</div>

						<div class="mui-button-row" id="sureBtn">
							<button type="submit" class="mui-btn defaultStatus">提&emsp;&emsp;交</button>
						</div>
					</form>


				</div>

			</div>
		</div>

		<!--<script type="text/javascript" th:src="@{/js/jquery-2.1.4.js}" src="js/jquery-2.1.4.js"></script>
		<script type="text/javascript" th:src="@{/js/mui.min.js}" src="js/mui.min.js"></script>-->
		<th:block th:include="include :: wxfooter" />
		<script type="text/javascript" th:src="@{/lib/jquery-weui/dist/js/jquery-weui.js}" src="lib/jquery-weui/dist/js/jquery-weui.js"></script>
		<script type="text/javascript" th:src="@{/lib/jquery-weui/dist/js/city-picker.js}" src="lib/jquery-weui/dist/js/city-picker.js"></script>
        <script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
        <!-- 验证插件 -->
		<!--<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
		<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>-->

		<script type="text/javascript">
			function form() {
				var city = $("input[name='city']").val()+$("input[name='street']").val();
				$("input[name='orderAddress']").val(city);
				var data = $("#dataForm").serialize();
				layer.load();
				$.ajax({
					type: "post",
					url: ctx + "wx/json/addOrders",
					data: data,
					dataType: "json",
					success: function (data) {
						$('.imgcode').click();
						$(".code").val("");
						layer.closeAll('loading');
						if (data.code==0) {
							 // mui.alert(data.msg);
							window.location.href = ctx + "/wx/index/success/" + data.data.ordersId;
							//  window.location.href = ctx + "/wx/index/ok/" + data.details.ordersId;
						} else {
							 mui.alert(data.msg);
						}
					},
					error: function (error) {
						layer.closeAll('loading');
						mui.alert("网络链接失败：" + error.status);
					}
				});
                event.preventDefault();
			}

			//刷新验证码
			$('.imgcode').click(function() {
				var url = ctx + "captcha/captchaImage?type=number&s=" + Math.random();
				$(".imgcode").attr("src", url);
			});
			console.log($("#city-picker"))

			$("#city-picker").cityPicker({
				title: "请选择收货地址",
				onChange: function(picker, values, displayValues) {
				}
			});
			// $(".leftbox").on("click", "div", function() {
			// 	var $index = $(this).index();
			// 	$(this).addClass('mmactive').siblings('div').removeClass('mmactive')
			// 	$(".all>div").eq($index).show().siblings("div").hide()
			// })
		</script>

	</body>

</html>